<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="CSS/Linkage.css" rel="stylesheet" type="text/css" />
<title>联动</title>


</head>
<body>
<div id="sBox">
<!--<select name="parents" id="parents" onchange= "setNext(this.value)";>
    <option value="">-请选择-</option>
    <option value="1">浙江</option>
    <option value="2">江苏</option>
</select> 
<select name="city" id="city">
    <option value="">-请选择-</option>
</select>-->
</div>
</body>
</html>
<script language="javascript" src="JS/showPrint.js"></script>
<script language="javascript" src="JS/func.js"></script>
<script language="JavaScript" type="text/javascript">
var arr = [];
arr['0'] = {name:'全国',nextName:'province', next:[
	{txt:'浙江',val:'00'},
	{txt:'江苏',val:'01'},
	{txt:'上海',val:'02'}
	]};
arr['00'] = {name:'浙江',nextName:'city', next:[
        {txt:'杭州', val:'000'},
        {txt:'宁波', val:'001'},
        {txt:'温州', val:'002'},
        {txt:'湖州', val:'003'}
    ]};
arr['000'] = {name:'杭州',nextName:'area', next:[
	{txt:'拱墅区', val:'0000'}
	]};
arr['01'] = {name:'苏州',nextName:'city', next:[
        {txt:'南京', val:'010'},
        {txt:'无锡', val:'011'},
        {txt:'徐州', val:'012'},
        {txt:'苏州', val:'013'},
        {txt:'南通', val:'014'},
        {txt:'淮阴', val:'015'},
        {txt:'扬州', val:'016'},
        {txt:'镇江', val:'017'},
        {txt:'常州', val:'018'}
    ]};
arr['02'] = {name:'上海',nextName:'city',next:[
		{txt:'上海',val:'020'}
	]};
var oBox=document.getElementById("sBox"); 
setNext('0');
 
function setNext(parents)
{
	var temp1=parents,temp2=0;
	oBox.innerHTML="";
	for(var i=0;i<parents.length;i++){
		var oTemp=createSelect(temp2,temp1.slice(1,2),parents);
		temp1=temp1.slice(1);
		temp2=temp2.toString()+temp1.slice(0,1)	
	}
	if(arr[parents]){
    	setSelectOption(arr[parents].nextName, arr[parents].next, '-请选择-');
	}
}

function createSelect(now,flag,parents){
	var oObj=document.createElement('select');
	if(arr[now]){
		oObj.id=arr[now].nextName;
	}else{ 
		return;
	}
	if((now===parents)&&parents.length!=1){		
		removeEvent(oObj,'change',function(){if(this.value != '') setNext(this.value);});
	}
	oBox.appendChild(oObj);
	bindEvent(oObj,'change',function(){if(this.value != '') setNext(this.value);});
	if(flag!=''){
		setSelectOption(arr[now].nextName, arr[now].next, '-请选择-',arr[now].next[flag].val);
	}
}


function removeOptions(selectObj)
{
    if (typeof selectObj != 'object')
    {
        selectObj = document.getElementById(selectObj);
    }
    var len = selectObj.options.length;
 
    for (var i=0; i < len; i++)
    {
        selectObj.options[0] = null;
    }
}

function setSelectOption(selectObj, optionList, firstOption, selected)
{
    if (typeof selectObj != 'object')
    {
        selectObj = document.getElementById(selectObj);
    }
    removeOptions(selectObj);
    var start = 0;
    if (firstOption)
    {
        selectObj.options[0] = new Option(firstOption, '');
        start ++;
    }
    var len = optionList.length;
    for (var i=0; i < len; i++)
    {
        selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
        if(selected == optionList[i].val)
        {
            selectObj.options[start].selected = true;
        }
        start ++;
    }
}
</script>